<template>
  <div>
    <a-card style="margin-top: 12px;">
      <div>
        <a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 7}" :wrapperCol="{span: 17, offset: 0}">
          <div class="fold">
            <a-row>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="类型"
                  prop="type"
                >
                  <a-select allowClear v-model="form.type" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                    <a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="层级"
                  prop="level"
                >
                  <a-input allowClear v-model="form.level" @change="(e) => form.level = e.target.value.replace(/[^0-9]/g, '')" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="名称"
                  prop="name"
                >
                  <a-input v-model="form.name" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="上级名称"
                  prop="parentName"
                >
                  <a-input v-model="form.parentName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="end">
              <a-button @click="submitForm" type="primary">查询</a-button>
              <a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 12px;">
      <div>
        <div>
          <a-button class="space-vertical" @click="showAddModal" type="primary" v-auth="`config:region:add`">新增</a-button>
          <a-dropdown>
            <a-button class="space-vertical">批量操作 <a-icon type="down" /></a-button>
            <a-menu @click="batchAction" slot="overlay">
              <a-menu-item key="delete" v-auth="`config:region:delete`">批量删除</a-menu-item>
            </a-menu>
          </a-dropdown>
          <!-- <a-button class="space-vertical" @click="showImportModal" v-auth="`config:region:query`">导入</a-button> -->
          <!-- <a-button class="space-vertical" @click="exportAction" v-auth="`config:region:query`">导出</a-button> -->
        </div>
        <standard-table
          ref="table"
          :size="`middle`"
          :page="page"
          :pageSize="pageSize"
          :total="total"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :selectedRows.sync="selectedRows"
          @onPageChange="onPageChange"
        >
          <div slot="action" slot-scope="{text, record}">
            <a @click="showQueryModal(record.id)">
              查看
            </a>
            <a-divider class="row-btn-divider" type="vertical" v-auth="`config:region:edit`"/>
            <a @click="showEditModal(record.id)" v-auth="`config:region:edit`">
              编辑
            </a>
            <a-divider class="row-btn-divider" type="vertical" v-auth="`config:region:delete`"/>
            <a @click="showDeleteModal(record.id)" v-auth="`config:region:delete`">
              删除
            </a>
          </div>
          <div slot="type" slot-scope="{text}">
            <span>{{text | dictFilter(dict.type)}}</span>
          </div>
        </standard-table>
      </div>
      <add-modal
        ref="addModal"
        :visible="visibleAddModal"
        @cancel="hideAddModal"
        @ok="addSuccess"
      />
     <edit-modal
        ref="editModal"
        :visible="visibleEditModal"
        @cancel="hideEditModal"
        @ok="editSuccess"
      />
      <query-modal
        ref="queryModal"
        :visible="visibleQueryModal"
        @cancel="hideQueryModal"
      />
    </a-card>
  </div>
</template>

<script>
import StandardTable from '@/components/table/standard-table'
import AddModal from './add-modal'
import EditModal from './edit-modal'
import QueryModal from './query-modal'
import {regionService} from '@/services'

const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    width: 80,
    scopedSlots: { customRender: 'no' }
  },
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: 300,
    ellipsis: true
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 100,
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '上级名称',
    dataIndex: 'parentName',
    width: 300,
    ellipsis: true
  },
  {
    title: '层级',
    dataIndex: 'level',
    width: 80
  },
  {
    title: '层级序列',
    dataIndex: 'levelSqe',
    width: 160
  },
  // {
  //   title: '创建时间',
  //   dataIndex: 'createTime',
  //   width: 160
  // },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 160
  },
  {
    title: '操作',
    width: 180,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'Region',
  components: { StandardTable, AddModal, EditModal, QueryModal },
  data () {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      form: {
        type: undefined,
        level: undefined,
        name: undefined,
        parentName: undefined,
      },
      dict: {
        type: []
      },
      visibleAddModal: false,
      visibleEditModal: false,
      visibleQueryModal: false
    }
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find(item => item.value == val)
      return dict ? dict.title : '未知'
    }
  },
  authorize: {
    showQueryModal: 'config:region:query',
    showAddModal: 'config:region:add',
    showEditModal: 'config:region:edit',
    showBatchDeleteModal: 'config:region:delete',
    showImportModal: 'config:region:import',
    exportAction: 'config:region:export'
  },
  methods: {
    reloadTable() {
      this.selectedRows = []
      this.page = 1
      this.queryListAction()
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.reloadTable()
    },
    submitForm() {
      this.reloadTable()
    },
    showImportModal() {
      this.$message.success('敬请期待!')
    },
    exportAction() {
      this.$message.success('敬请期待!')
    },
    showAddModal() {
      this.visibleAddModal = true
    },
    showEditModal(key) {
      this.visibleEditModal = true
      this.$refs.editModal.queryAction(key)
    },
    showQueryModal(key) {
      this.visibleQueryModal = true
      this.$refs.queryModal.queryAction(key)
    },
    hideAddModal() {
      this.visibleAddModal = false
      this.$refs.addModal.$refs.form.resetFields()
    },
    hideEditModal() {
      this.visibleEditModal = false
      this.$refs.editModal.$refs.form.resetFields()
    },
    hideQueryModal() {
      this.visibleQueryModal = false
      this.$refs.queryModal.$refs.form.resetFields()
    },
    addSuccess() {
      this.hideAddModal()
      this.reloadTable()
    },
    editSuccess() {
      this.hideEditModal()
      this.reloadTable()
    },
    deleteAction(keys) {
      this.confirmLoading = true
      const params = {
        ids: keys
      }
      return regionService.del(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.$message.success(result.msg)
          this.reloadTable()
        }
      }).finally(this.confirmLoading = false)
    },
    batchAction (e) {
      if (this.selectedRows.length <= 0) {
        this.$message.warning('请选择记录后操作')
        return
      }
      if (e.key === 'delete') {
        this.showBatchDeleteModal()
      }
    },
    showDeleteModal (key) {
      this.$confirm({
        confirmLoading: this.confirmLoading,
        icon: 'info-circle',
        title: '警告',
        content: '你确定要删除此项吗？',
        okType: 'danger',
        onOk:() => {
          this.deleteAction([key])
        },
        onCancel() {},
      })
    },
    showBatchDeleteModal () {
      this.$confirm({
        confirmLoading: this.confirmLoading,
        icon: 'info-circle',
        title: '警告',
        content: '你确定要删除所有选中项吗？',
        okType: 'danger',
        onOk:() => {
          this.deleteAction(this.selectedRows.map(item => item.id))
        },
        onCancel() {},
      })
    },
    onPageChange(pagination) {
      this.page = pagination.current
      this.pageSize = pagination.pageSize
      this.queryListAction()
    },
    queryListAction() {
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        queryParams: this.form
      }
      regionService.queryList(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.dataSource = []
          this.dataSource = result.data.records
          this.total = result.data.totalCount
        }
      }).finally(this.loading = false)
    }
  },
  created() {
    this.getDict(JSON.stringify({code: 'SYS_REGION_TYPE'})).then(res => this.dict.type = res.data.data)
    this.reloadTable()
  }
}
</script>
<style scoped lang="less">
  .ant-form-item {
    margin-bottom: 12px;
  }
  .fold{
    width: calc(100% - 12px);
    display: inline-block;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>